<template>
	<view class="text-area">
		<!-- <button @tap="getwz">点我获取当前位置</button> -->
		<map class="map" :longitude="longitude" :latitude="latitude" :markers="marker" :polyline="polyline"></map>
		<view class="block">
			<view class="but" @click="startRun" :class="{ 'run-flag-active': runFlag }">
				{{ content }}
			</view>
			<view class="msg">
				<view class="speed">
					平均速度：{{speed}} m/s
				</view>
				<view class="kilo">
					公里：{{kilo}} km
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	// var amapFile = require('@/utils/amap-wx.130.js');
	// var myAmapFun = new amapFile.AMapWX({
	// 	key: '23727365b2fbea8284f75184c630c147'
	// });
	export default {
		data() {
			return {
				longitude: 107.701594,
				latitude: 29.615453,
				marker: [],
				polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
						longitude: 107.701594,
						latitude: 29.615453
					}, {
						longitude: 107.70048,
						latitude: 29.617
					}],
					color: "#0000AA", //线的颜色
					width: 1, //线的宽度
					// 　　　　dottedLine:true,//是否虚线
				}],
				// 跑步标致,为true时停止跑步
				runFlag: true,
				content: "开始运动",
				speed: 0,
				kilo: 0,
				startTime: null, // 运动开始时间
				totalElapsedTime: 0, // 累计行驶时间（单位：秒）

			}
		},
		onLoad() {
			var that = this
			wx.authorize({
				scope: 'scope.userLocation',
				success(res) {
					console.log(res)
					if (res.errMsg == 'authorize:ok') {
						wx.getLocation({
							type: 'gcj02',
							success(res) {
								console.log(res) //此时里面有经纬度
								// 设置中心点位
								that.longitude = res.longitude;
								that.latitude = res.latitude;
								// 添加至标记点位
								that.marker.push({
									id: 0, // 保证ID唯一
									longitude: res.longitude,
									latitude: res.latitude,
									iconPath: '../../static/img/map/marker_checked.png',
									rotate: 0,
									width: 10,
									height: 20,
									title: '当前位置',
								});
							}
						})
					}
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		methods: {
			getwz() {
				var that = this
				wx.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					highAccuracyExpireTime: 3500,
					success(res) {
						console.log(res);
						// 设置中心点位
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						// 修改标记点位
						that.marker[0].longitude = res.longitude;
						that.marker[0].latitude = res.latitude;
						// 加入轨迹折线
						that.polyline[0].points.push({
							longitude: res.longitude,
							latitude: res.latitude,
						});

						// 计算与上一点的距离并累加到总路程
						// 计算距离和速度
						const distance = that.calculateDistance(
							that.polyline[0].points[that.polyline[0].points.length - 2], {
								longitude: res.longitude,
								latitude: res.latitude
							}
						);
						// 更新总路程(保留三位有效数字)
						that.kilo = (parseFloat(that.kilo) + distance).toFixed(3);
						// 设置速度的实时显示（基于单次位置更新的瞬时速度）
						// 判断速度是否有效（非Infinity和NaN），有效则更新速度显示
						var nowTime = new Date().getTime(); // 获取当前时间
						var timeSpace = nowTime - that.startTime; // 单位：毫秒
						var speedRes = that.kilo * 1000 * 1000 / timeSpace; // 单位：m/s
						if (!isNaN(speedRes) && isFinite(speedRes)) {
							that.speed = speedRes.toFixed(3)
						}
					},
					fail(info) {
						console.log(info);
					}
				})
			},

			// 开始运动
			startRun() {
				// ... 原有startRun方法内容 ...
				var that = this
				if (that.runFlag) {
					wx.showModal({
						content: '是否开始运动',
						success(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
								// 开始运动
								that.content = "停止运动"
								that.runFlag = !that.runFlag;

								// 获取位置
								wx.getLocation({
									type: 'gcj02',
									isHighAccuracy: true,
									highAccuracyExpireTime: 3500,
									success(res) {
										// 设置中心点位
										that.longitude = res.longitude;
										that.latitude = res.latitude;
										// 修改标记点位
										that.marker[0].longitude = res.longitude;
										that.marker[0].latitude = res.latitude;
										// 修改初始轨迹折线起点
										that.polyline[0].points[0].longitude = res.longitude,
											that.polyline[0].points[0].latitude = res.latitude,
											that.polyline[0].points[1].longitude = res.longitude,
											that.polyline[0].points[1].latitude = res.latitude
									},
									fail(info) {
										console.log(info);
									}
								});

								// 或当前时间
								that.startTime = new Date().getTime();

								// 定时器跑步
								that.locationTimer = setInterval(() => {
									that.getwz();
								}, 8000); // 开始跑步时重新开启定时器
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})

				} else {
					wx.showModal({
						content: '是否停止运动',
						success(res) {
							if (res.confirm) {
								// console.log('用户点击确定')
								// 停止运动
								that.content = "开始运动"
								that.runFlag = !that.runFlag;

								clearInterval(that.locationTimer); // 结束跑步时清除定时器
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
				}
			},


			// 计算路径长度
			calculateDistance(prevPoint, currentPoint) {
				const R = 6371; // 地球平均半径，单位为公里
				const dLat = (currentPoint.latitude - prevPoint.latitude) * Math.PI / 180;
				const dLon = (currentPoint.longitude - prevPoint.longitude) * Math.PI / 180;
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(prevPoint.latitude * Math.PI / 180) *
					Math.cos(currentPoint.latitude * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				let distance = R * c;

				// 将距离保留三位小数
				distance = parseFloat(distance.toFixed(3));
				return distance;

				// 计算当前时间并累计行驶时间
				const now = new Date().getTime();

				// 计算平均速度（单位：m/s）
				let speed = distance * 1000 / elapsedTime;
				speed = parseFloat(speed.toFixed(3)); // 保留三位小数
			},
		},

		// 不再使用时，记得清除定时器，防止内存泄漏
		onUnload() {
			clearInterval(this.locationTimer);
		},
	}
</script>


<style lang="scss">
	.map {
		width: 100%;
		height: 650rpx;
	}

	.block {
		width: 95%;
		height: 300rpx;
		border: 2rpx solid #3c9cff;
		border-radius: 20rpx;
		margin: 20rpx 20rpx;

		display: flex;
		align-items: center;

		.but {
			width: 50%;
			height: 100%;
			background-color: red;
			border-radius: 20rpx;
			border-right: 2rpx solid white;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: left;
			font-size: 50rpx;
			font-weight: 700;
			color: white;
		}

		.but.run-flag-active {
			background-color: #3c9cff;
		}

		.msg {
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.speed {
				width: 90%;
				height: 50%;
				background-color: white;
				border-bottom: 2rpx solid #3c9cff;
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				text-align: left;
				font-size: 40rpx;
				font-weight: 550;
			}

			.kilo {
				width: 90%;
				height: 50%;
				background-color: white;
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				text-align: left;
				font-size: 40rpx;
				font-weight: 550;
			}
		}
	}
</style>